@import '~carbon-components/scss/globals/scss/helper-mixins';

.container {
  position: relative;
  display: flex;
  max-width: 28rem;
  width: 100%;
  margin-left: $spacing-03;
  height: 3rem;
  background-color: $inverse-02;
  color: $inverse-01;
  transition: max-width $duration--fast-02 $carbon--standard-easing,
    background $duration--fast-02 $carbon--standard-easing;
}

.container.inputFocusWithin {
  outline: 2px solid $inverse-01;
  outline-offset: -2px;
}

.container.hidden {
  max-width: 3rem;
  background-color: $ui-05;
}

.container svg {
  fill: $inverse-01;
}

.inputWrapper {
  display: flex;
  flex-grow: 1;
  border-bottom: 1px solid $inverse-02;
}

.input {
  @include carbon--type-style('body-short-02');
  color: $inverse-01;
  caret-color: $inverse-01;
  background-color: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 3rem;
  padding: 0;
  transition: opacity $duration--fast-02 $carbon--standard-easing;
}

.input.hidden {
  opacity: 0;
  pointer-events: none;
}

.label {
  @include hidden;
}

.list {
  position: absolute;
  z-index: z('floating');
  padding: $spacing-05 0;
  left: 0;
  right: 0;
  top: 3rem;
  background-color: $ui-05;
  border: 1px solid $inverse-02;
  border-top: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
}

.list.hidden {
  border: none;
  padding: 0;
}

.tab {
  text-transform: capitalize;
}

.description {
  @include carbon--type-style('caption-01');
  text-transform: lowercase;
  color: $carbon--gray-30;
}

.link {
  padding: 6px $spacing-05;
  cursor: pointer;
  @include carbon--type-style('heading-01');
  transition: all $duration--fast-01 motion(standard, productive);
  display: block;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: $carbon--gray-30;

  &:hover {
    background-color: #595A5A;
    color: $carbon--gray-10;
    .description {
      color: $carbon--gray-10;
    }
  }
}

.searchButton {
  width: 3rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  padding: 0;
  flex-shrink: 0;
  opacity: 1;
  transition: background-color $duration--fast-02 $carbon--standard-easing,
    opacity $duration--fast-02 $carbon--standard-easing;
  // Hex values used pending shell theming
  &:hover {
    cursor: pointer;
    background-color: #353535;
  }
  &:active {
    background-color: #3d3d3d;
  }
  &:focus {
    // shell header button's don't present focus on mobile
    outline: 2px solid $inverse-01;
    outline-offset: -2px;
  }
}

.searchButton.hidden {
  opacity: 0;
}

.searchButton.inactive {
  pointer-events: none;
  &:hover {
    background-color: transparent;
  }
}

.search-button--close {
  &:hover {
    background-color: #4c4c4c;
  }
}

.link.active {
  background-color: #595A5A;
  color: $carbon--gray-10;
  outline: 0;
  .description {
    color: $carbon--gray-10;
  }
}
